import React, { useCallback, useRef, useState } from 'react'
import { Form, Input, Button, Space } from "antd"
export default function IndexPage(props: any) {
    const [showflag, setShowflag] = useState(false)
    const [form] = Form.useForm();
    let onFinish = useCallback((values: any) => {
        console.log('Success:', values);
    }, [])
    let onFinishFailed = useCallback((errorInfo: any) => {
        console.log('Failed:', errorInfo);
    }, [])
    return (
        <div className='main'>
            <div className="classify">
                <div className="classify_left">
                    <div className='title'>
                        管理标签
                    </div>
                    <div className='classify_left_bottom'>
                        <Form
                            className='classify_left_from'
                            form={form}
                            name="form"

                            labelCol={{ span: 8 }}
                            wrapperCol={{ span: 16 }}
                            initialValues={{ remember: true }}
                            onFinish={onFinish}
                            onFinishFailed={onFinishFailed}
                            autoComplete="off"
                        >
                            <div className='classify_input'>
                                <Form.Item
                                    className='.input'
                                    name="username"
                                    rules={[{ required: true, message: 'Please input your username!' }]}
                                >
                                    <Input placeholder='输入分类名称' />
                                </Form.Item>

                                <Form.Item
                                    name="password"
                                    rules={[{ required: true, message: 'Please input your password!' }]}
                                >
                                    <Input placeholder='输入分类值（请输入英文，作为路由使用）' />
                                </Form.Item>
                            </div>
                            <div className='classify_left_buttonbox'>

                                <Form.Item >
                                    <Button type="primary" htmlType="submit">
                                        更新
                                    </Button>
                                </Form.Item>
                                {showflag ? <Button type="dashed">
                                    返回添加
                                </Button> : ""}
                                {
                                    showflag ? <Button className='classify_left_delete' danger>
                                        删除
                                    </Button> : ""
                                }



                            </div>
                        </Form>

                    </div>

                </div>
                <div className="classify_right">
                    <div className='title'>
                        所有标签
                    </div>
                    <div className='classify_right_nav'>
                        <Form.Item>
                            <Space>

                                <Button htmlType="button" onClick={() => {
                                    setShowflag(true)
                                    form.setFieldsValue({
                                        username: "Git",
                                        password: "git"
                                    })
                                }}>
                                    Git
                                </Button>
                                <Button htmlType="button" onClick={() => {
                                    form.setFieldsValue({
                                        username: "Docker",
                                        password: "docker"
                                    })
                                }}>
                                    Docker
                                </Button>
                                <Button htmlType="button" onClick={() => {
                                    form.setFieldsValue({
                                        username: "阅读 ",
                                        password: "reading"
                                    })
                                }}>
                                    阅读
                                </Button>

                                <Button htmlType="button" onClick={() => {
                                    form.setFieldsValue({
                                        username: "nginx",
                                        password: "nginx"
                                    })
                                }}>
                                    nginx
                                </Button>
                                <Button htmlType="button" onClick={() => {
                                    form.setFieldsValue({
                                        username: "JS",
                                        password: "js"
                                    })
                                }}>
                                    JS
                                </Button>
                                <Button htmlType="button" onClick={() => {
                                    setShowflag(true)
                                    form.setFieldsValue({
                                        username: "TS",
                                        password: "ts"
                                    })
                                }}>
                                    TS
                                </Button>
                                <Button htmlType="button" onClick={() => {
                                    form.setFieldsValue({
                                        username: "bash",
                                        password: "bash"
                                    })
                                }}>
                                    bash
                                </Button>
                                <Button htmlType="button" onClick={() => {
                                    form.setFieldsValue({
                                        username: "CSS",
                                        password: "css"
                                    })
                                }}>
                                    CSS
                                </Button>
                                <Button htmlType="button" onClick={() => {
                                    form.setFieldsValue({
                                        username: "LeetCode",
                                        password: "leetcode"
                                    })
                                }}>
                                    LeetCode
                                </Button>
                            </Space>
                        </Form.Item>
                    </div>
                </div>
            </div>
        </div>
    );
}
